<template>
  <div>
    <Comheadernav></Comheadernav>
    <Comheader></Comheader>
    <div class="container">
      <div class="bread container">
        <div class="bread-item">
          <a href="#/" class="router-link-active">首页</a>
        </div>
        <i class="iconfont icon-angle-right"></i>
        <div class="bread-item">
          <span></span>
        </div>
      </div>

      <div class="mess" v-if="sopList.length>0">
        <div class="title">
          <div>
            <input
              type="checkbox"
              name=""
              id=""
              @change="ckAll()"
              v-model="ckAllchecked"
            />
            全选
          </div>
          <div>商品信息</div>
          <div>单价</div>
          <div>数量</div>
          <div>小计</div>
          <div>操作</div>
        </div>
        <div class="box">
          <div class="items flex" v-for="(item, index) in sopList">
            <div class="lists">
              <input
                type="checkbox"
                v-model="item.selected"
                @change="cks(item.skuId, item.selected)"
              />
            </div>
            <div class="flex lists">
              <img :src="item.picture" alt="" />
              <div class="goods">
                <p>{{ item.name }}</p>
                <div>
                  <span>{{ item.attrsText }}</span>
                </div>
              </div>
            </div>
            <div class="lists">￥{{ item.price }}</div>
            <div class="numbox lists">
              <div class="num flex">
                <a href="javascript:;" @click="cartjian(index, item.skuId,item.selected)">
                  -
                </a>
                <input type="text" :value="item.count" /><a
                  href="javascript:;"
                  @click="cartjia(index, item.skuId,item.selected)"
                  >+</a
                >
              </div>
            </div>
            <div class="lists red">￥{{ item.price * item.count }}</div>
            <div class="lists">
              <p>移入收藏夹</p>
              <p @click="del(item.skuId)">删除</p>
              <p>找相似</p>
            </div>
          </div>
        </div>
        <div class="action">
            <div class="batch">
              <div class="xtx-checkbox">
                <input type="checkbox" name="" id="" v-model="ckAllchecked"><span>全选</span>
              </div>
              <a href="javascript:;" @click="delAll">删除商品</a
              ><a href="javascript:;">移入收藏夹</a
              ><a href="javascript:;">清空失效商品</a>
            </div>
            <div class="total">
              共 {{this.$store.state.user.cartNum}} 件商品，已选择 {{this.$store.state.user.sum}} 件，商品合计：
              <span class="red">¥{{sum}}</span
              ><button class="primary xtx-button ellipsis middle ">
                下单结算
              </button>
            </div>
          </div>
      </div>


      <div class="cart-none" v-if="sopList.length==0">
        <img src="" alt="">
        <p>购物车内暂时没有商品</p>
        <button @click="home">继逛逛</button>
      </div>
      <Comrecommend></Comrecommend>
    </div>

    <Comfooter></Comfooter>
  </div>
</template>

<script>
import Comheader from "@/erabbit/layout/header.vue";
import Comheadernav from "@/erabbit/layout/nav.vue";
import Comfooter from "@/erabbit/foooterNav.vue";
import Comrecommend from "@/erabbit/recommend.vue";
export default {
  components: {
    Comheader,
    Comheadernav,
    Comfooter,
    Comrecommend,
  },
  data() {
    return {
      sopList: [],
      count: 0,
      cartCount: 0,
      cartSel: [],
      ckAllchecked: true,
      delAllList:[],
      sum:0,
    };
  },
  mounted() {
    this.shooping();
    this.ckAll()
    this.cart()
  },

  methods: {
    shooping() {
      this.axios({
        url: "http://pcapi-xiaotuxian-front-devtest.itheima.net/member/cart",
        method: "get",
        headers: {
          Authorization: "Bearer " + this.$store.state.user.token,
        },
      }).then((res) => {
        if (res.data.msg == "操作成功") {
          this.sopList = res.data.result;
          console.log(this.sopList);
   

          this.cart()
          //   this.$store.commit("setcartNum", this.sopList.count);
        }
      });
      this.axios({
        url: "http://pcapi-xiaotuxian-front-devtest.itheima.net/member/cart/count",
        method: "get",
        headers: {
          Authorization: "Bearer " + this.$store.state.user.token,
        },
      }).then((res) => {
        if (res.data.msg == "操作成功") {
          this.cartCount = res.data.result;
          this.$store.commit("setcartNum", this.cartCount.count);
          this.cart()
        }
      });
    },
    cartjian(index, id,checked) {
      console.log(id);
      this.count = this.sopList[index].count--;
      this.count--;
      console.log(this.count);
      if (this.sopList[index].count == 0) {
        this.sopList[index].count = 1;
      }

      this.axios({
        url:
          "http://pcapi-xiaotuxian-front-devtest.itheima.net/member/cart/" + id,
        method: "put",
        headers: {
          Authorization: "Bearer " + this.$store.state.user.token,
        },
        data: {
          count: this.count,
        },
      }).then((res) => {
        if (res.data.msg == "操作成功") {
          console.log(res);
          this.shooping();
          this.cks(id,checked)
          this.cart()
        }
      });
    },
    cartjia(index, id,checked) {
      this.count = this.sopList[index].count++;
      this.count++;
      this.axios({
        url:
          "http://pcapi-xiaotuxian-front-devtest.itheima.net/member/cart/" + id,
        method: "put",
        headers: {
          Authorization: "Bearer " + this.$store.state.user.token,
        },
        data: {
          count: this.count,
        },
      }).then((res) => {
        console.log(res);
        this.shooping();
        this.cks(id,checked)
        this.cart()
      });
    },
    del(id) {
      console.log(id);
      this.axios({
        url: "http://pcapi-xiaotuxian-front-devtest.itheima.net/member/cart",
        method: "delete",
        headers: {
          Authorization: "Bearer " + this.$store.state.user.token,
        },
        data: {
          ids: [id],
        },
      }).then((res) => {
        if (res.data.msg == "操作成功") {
          this.shooping();
          this.cart()
        }
      });
    },

    ckAll() {
      // this.cks()
      this.sopList.forEach((i) => {
        console.log(i.selected);

        i.selected = this.ckAllchecked;
        console.log(i.selected);
      });
    },
    cks(id,checked) {
      this.axios({
        url: "http://pcapi-xiaotuxian-front-devtest.itheima.net/member/cart/selected",
        method: "put",
        headers: {
          Authorization: "Bearer " + this.$store.state.user.token,
        },
        data: {
          ids: [id],
          selected: checked,
        },
      }).then((res) => {
        this.shooping()
        var sum = 0
        this.sopList.forEach((i) => {
        //   var bool = true;
        //   this.ckAllchecked = false;

        //   if (i.selected == false) {
        //     bool = false;
        //     console.log(bool);
        //     console.log(this.ckAllchecked);
        //   }
        //   console.log(bool);
        //   this.ckAllchecked = bool;

    
        if(i.selected){ 
            console.log(i.count);
            sum += i.count
        }
        console.log(sum);
        this.$store.commit("setcartTrue", sum);
        this.cart()
        });
      });
    },
    delAll(){
        this.sopList.forEach((i) => {
        if(i.selected){
          console.log(i.skuId);
          this.delAllList.push(i.skuId)
        }
        });
        console.log(this.delAllList);
        this.axios({
        url: "http://pcapi-xiaotuxian-front-devtest.itheima.net/member/cart",
        method: "delete",
        headers: {
          Authorization: "Bearer " + this.$store.state.user.token,
        },
        data: {
          ids:this.delAllList ,
        },
      }).then((res) => {
        if (res.data.msg == "操作成功") {
          this.shooping();
          this.cart()
        }
      });
    },
    cart(){
        this.axios({
        url: "http://pcapi-xiaotuxian-front-devtest.itheima.net/member/cart",
        method: "get",
        headers: {
          Authorization: "Bearer " + this.$store.state.user.token,
        },
      }).then((res) => {
        if (res.data.msg == "操作成功") {

          this.sopList = res.data.result;
          console.log(this.sopList);
          this.sum = 0
          this.sopList.forEach(i=>{
            if(i.selected == true){
                this.sum +=i.count*i.price

            }
          })
          console.log(this.sum);
        }
      });
    },
    home(){
        this.$router.push({path:'/home'})
    }
  },
};
</script>

<style lang="scss" scoped>

.cart-none{
    padding: 150px 0;
    width: 100%;
    text-align: center;
    background-color: #fff;
    p{
        padding: 20px 0;
        color: #999;
    }
    button{
        border: 1px solid  #27ba9b;
    background: #27ba9b;
    color: #fff;
    width: 180px;
    height: 50px;
    font-size: 16px;
    text-align: center;
    }
}
.xtx-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    background: #fff;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid  #27ba9b;
    background: #27ba9b;
    color: #fff;
    width: 180px;
    height: 50px;
    font-size: 16px;    
}
.action {
    display: flex;
    background: #fff;
    margin-top: 20px;
    height: 80px;
    align-items: center;
    font-size: 16px;
    justify-content: space-between;
    padding: 0 30px;
}
.action .xtx-checkbox {
    color: #999;
}
.xtx-checkbox {
    display: inline-block;
    margin-right: 2px;
}
.action .batch a {
    margin-left: 20px;
}
a {
    text-decoration: none;
    color: #333;
    outline: none;
}
.action .batch a {
    margin-left: 20px;
}
.action .batch a {
    margin-left: 20px;
}
.action .red {
    font-size: 18px;
    margin-right: 20px;
    font-weight: 700;
}
.red {
  color: red;
}
.flex {
  display: flex;
}
.mess {
  background-color: #fff;
  .title {
    border-bottom: 1px solid #999;
    line-height: 50px;
    text-align: center;
    overflow: hidden;
    div {
      float: left;
      &:nth-of-type(1) {
        width: 120px;
        color: #27ba9b;
        text-align: left;
        padding: 10px;
        padding-left: 30px;
      }
      &:nth-of-type(2) {
        width: 400px;
        padding: 10px;
      }
      &:nth-of-type(3) {
        width: 220px;
        padding: 10px;
      }
      &:nth-of-type(4) {
        width: 180px;
        padding: 10px;
      }
      &:nth-of-type(5) {
        width: 180px;
        padding: 10px;
      }
      &:nth-of-type(6) {
        width: 140px;
        padding: 10px;
      }
    }
  }
  .box {
    width: 100%;
    display: block;
    .items {
      height: 120px;
      align-items: center;
      width: 100%;
      .lists {
        text-align: center;
        align-items: center;
        &:nth-of-type(1) {
          width: 120px;
          color: #27ba9b;
          text-align: left;
          padding: 10px;
          padding-left: 30px;
        }
        &:nth-of-type(2) {
          width: 400px;
          padding: 10px;
          img {
            width: 100px;
            height: 100px;
          }
          .goods {
            width: 280px;
            font-size: 16px;
            padding-left: 10px;
            color: #999;
            text-align: left;

            p {
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              color: #000;
              text-align: left;
            }
            div {
              display: inline-block;
              border: 1px solid #f5f5f5;
              text-align: left;
            }
          }
        }
        &:nth-of-type(3) {
          width: 220px;
          padding: 10px;
        }
        &:nth-of-type(4) {
          padding: 10px;
        }
        &:nth-of-type(5) {
          width: 180px;
          padding: 10px;
        }
        &:nth-of-type(6) {
          width: 140px;
          padding: 10px;
        }
      }

      .numbox {
        width: 180px;
        .num {
          width: 120px;
          height: 30px;
          border: 1px solid #e4e4e4;
          text-align: center;
          padding: 0;
          margin: 0 auto;
        }
        a {
          display: block;
          width: 29px;
          line-height: 28px;
          text-align: center;
          background: #f8f8f8;
          font-size: 16px;
          color: #666;
        }
        input {
          width: 60px;
          padding: 0 5px;
          text-align: center;
          color: #666;
        }
      }
    }
  }
}
</style>